<template>
	<view class="content">
		<view class="top-title">您所充值的金额为</view>
		<view class="top">
			<view><u-input v-model="price" input-align="center" :custom-style="customStyle" disabled /></view>
			<text>元</text>
		</view>
		<view class="top-tips">确认无误后，点击下方按钮支付。</view>
		
		<view class="center-red-tips">{{detailsData.red_one}}</view>
		<view class="center-red-tips">{{detailsData.red_two}}</view>
		<view class="center-red-tips last-red-tips">{{detailsData.red_three}}</view>
		
		<view class="center-gray-tips">{{detailsData.black_one}}</view>
		<view class="center-gray-tips">{{detailsData.black_two}}</view>
		
		<view class="btn">
			<uv-btn :loading="loading" @click="handlePayClick" text="确认支付" loading-text="支付中..."></uv-btn>
		</view>
		<view class="bottom" @click="handleGoLook" >点击查看充电券使用方法>></view>
		<view class="bottom-safe-area"></view>
		<!--单悬浮客服-->
		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				detailsData:{},
				price:'',
				customStyle:{
					fontSize:'80rpx',
					color:'#0DA297',
					fontWeight:'bold'
				},
				loading:false,
			}
		},
		onLoad(options) {
			this.price=options.price/100;
			this.id=options.id;
			this.getSignPayRequest();
		},
		methods: {
			//查询页面数据
			getSignPayRequest(){
				this.$u.api.getSignPay({
					
					kind_id:this.id,
				}).then(res=>{
					this.detailsData=res.data;
				}).catch();
			},
			//支付
			handlePayClick(){
				this.loading=true;
				//1.wechat pay：
				uni.login({
					provider: 'weixin',
					success:ret=>{
						//create order
						this.$u.api.commonPay({
							
							code:ret.code,
							member:13,
							fee:this.price*100,
							kind_id:this.id,
						}).then(res=>{
							
							if(res.result_code=='314'){
								let resOrderId=res.data.order_id;
								let tradeNO=res.data.trade_no;//支付宝支付需要的tradeNO
								if(resOrderId){
									
									uni.requestPayment({
										//微信
										// #ifdef	MP-WEIXIN
										provider: 'wxpay',
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: 'MD5',
										paySign: res.data.paySign,
										// #endif
										//支付宝
										// #ifdef	MP-ALIPAY
										provider: 'alipay',
										orderInfo:tradeNO,
										// #endif
										success: (resultData)=>{
											
											// #ifdef	MP-ALIPAY
											if(resultData?.resultCode==6001 || resultData?.resultCode==6002){
												//Payment failed
												this.$utils.modal({
													content:'支付失败',
													showCancel: false,
													callback:(bool)=>{
														this.loading=false;
													}
												});
												return false;
											};
											// #endif
											
											
											
											//Check if payment is successful
											this.$u.api.checkPaymentSuccess({
												order_id:resOrderId,
												
											}).then((retu)=>{
												if(retu.result_code=='300'){
													this.loading=false;
													//payment successful
													this.$utils.back();
												}else{
													this.$utils.modal({
														content: retu.msg,
														showCancel: false,
														callback:(bool)=>{
															this.loading=false;
														}
													});
												};
											}).catch(err=>{
												this.loading=false;
											});
				
										},
										fail:()=>{
											
											//Payment failed
											this.$utils.modal({
												content:'支付失败',
												showCancel: false,
												callback:(bool)=>{
													this.loading=false;
												}
											});

											
										}
									});
								};
							}else{
								this.$utils.modal({
									content:res.msg,
									showCancel: false
								});
							};
						}).catch(()=>{
							
						});
						
					}
				});
			},
			//跳转至查看
			handleGoLook(){
				uni.navigateTo({
					url: '/pages/sign/look'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding:60rpx;
	}
	.top-tips{
		text-align: center;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
	.top-title{
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		padding:40rpx 0 80rpx 0;
	}
	.top{
		text-align: center;
	}
	.top>view{
		display: inline-block;
		border-bottom:2rpx solid #999;
		vertical-align: bottom;
		width:300rpx;
		padding-bottom: 10rpx;
	}
	.top>text{
		vertical-align: bottom;
		color:#333;
		font-size:28rpx;

		font-weight: bold;
	}
	.center-red-tips{
		text-align: center;
		color:#E10D26;
		font-size:28rpx;
		line-height: 50rpx;
		font-weight: bold;
	}
	.center-gray-tips{
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: #999999;
	}
	.bottom{
		text-align: center;
		text-decoration:underline;
	}
	.last-red-tips{
		padding-bottom: 40rpx;
	}
	.btn{
		padding-top: 60rpx;
	}
	.bottom{
		font-size: 24rpx;
		text-decoration: underline;
		color: #0DA297;
		padding-top: 50rpx;
	}
</style>

